<template>
            <!-- 分类管理 -->
<div class="container">

    <el-row>
            <el-col :span="8">
                <el-input placeholder="请输入关键词"></el-input>
            </el-col>
            <el-col  :span="10" class="button-tree">
                <el-button  type="success" @click="Addtype">
                    新增分类
                </el-button>
                <el-button  type="danger">
                    批量删除
                </el-button>
            </el-col>
    </el-row>

    <!-- 生成树 -->
    <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]">
    </el-tree>

     <!-- 新增分类 -->

    <el-dialog  title="分类" :visible.sync="dialogVisible"  width="20%" :before-close="handleClose">
        <el-form >
            <el-form-item label="父级分类">
                <el-cascader
                    :options="options" disabled
                    placeholder="留空为跟分类" >
                </el-cascader>
            </el-form-item>

            <el-form-item label="分类名称"   >
                 <el-input v-model="form.sort_name" style="width:220px;"></el-input>
            </el-form-item>

             <el-form-item label="分类类别"  >
                  <el-select v-model="form.sort_type" placeholder="请选择">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                </el-select>
             </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ClickSave()">确 定</el-button>
        </span>
    </el-dialog>

</div>

</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      selectedOptions: {},
      form: {
        id: 0,
        sort_name: '',
        sort_type: ''
      },
      options1: [
        {
          value: '1',
          label: '新闻'
        },
        {
          value: '2',
          label: '汽车'
        },
        {
          value: '3',
          label: '科技'
        }
      ],
      options: [
        {
          value: 'zhinan1',
          label: '指南2',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            }
          ]
        }
      ],

      data: [
        {
          id: 1,
          label: '一级 2',
          children: [
            {
              id: 3,
              label: '二级 2-1',
              children: [
                {
                  id: 4,
                  label: '三级 3-1-1'
                },
                {
                  id: 5,
                  label: '三级 3-1-2',
                  disabled: true
                }
              ]
            },
            {
              id: 2,
              label: '二级 2-2',
              disabled: true,
              children: [
                {
                  id: 6,
                  label: '三级 3-2-1'
                },
                {
                  id: 7,
                  label: '三级 3-2-2',
                  disabled: true
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    ClickSave () {
      var d = {}
      d.sort_name = this.sort_name
      d.sort_type = this.sort_type
      d.url = ''
      this.$ajax(d.url, { model: d })
        .then(resources => {})
        .catch((err = {}))
    },
    Addtype () {
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭')
        .then(_ => {})
        .catch(_ => {})
    }
  }
}
</script>
